<template>
  <div class="gd-container" v-if="show">
    <div class="middle-box">
      <div class="goods-detail">
        <img v-if="goods.picture !== null" :src="goods.picture" alt="" class="picture">
        <div class="month-sale">月售10份</div>
        <div class="intro">{{ goods.intro }}</div>
        <div class="price">￥ : {{ goods.price}}</div>
      </div>
      <div class="close-btn" @click="goodsInfoClosed">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodDetail",
  props: ['goods'],
  data(){
    return{
      show: false
    }
  },
  methods:{
    goodsInfoClosed(){
      this.show = false
      // this.goods = null
    }
  },
  watch:{
    goods(newValue, oldValue){
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.gd-container{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  .middle-box{
    position: relative;
    width: 315px;
    height: 440px;
    .goods-detail{
      padding: 10px;
      background-color: white;
      height: 368px;
      border-radius: 10px;
      overflow: hidden;
      .picture{
        width: 100%;
        height: 236px;
      }
      .month-sale{
        font-size: 12px;
        margin-top: 10px;
      }
      .intro{
        font-size: 14px;
        margin-top: 10px;
        height: 40px;
        text-overflow: ellipsis;
      }
      .price{
        color: #fb3444;
        font-size: 18px;
        margin-top: 15px;
      }

    }
    .close-btn{
      position: absolute;
      height: 40px;
      width: 40px;
      background-image: url('http://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/df125964473c5a2c4edadb74d8a11995.png');
      background-size: 40px;
      background-position: center;
      border-radius: 50%;
      bottom: 0;
      left: 50%;
      right: 50%;
      margin-left: -20px;
    }
  }

}
</style>